<template>
  <div class="背景">
    <div class="页眉">
    </div>
    <el-row :gutter="16" type="flex" justify="center">
      <el-col :span="4">
        <div class="文本框" style="height: 800px;">
          <div class="标题">
            富吾财经
          </div>
          <br/>
          <el-menu router>
            <el-menu-item index="/" >
              <div class="小标题">
                富头条
              </div>
            </el-menu-item>
            <el-menu-item index="/Video" >
              <div class="小标题">
                视频
              </div>
            </el-menu-item>
            <el-menu-item index="/Live" >
              <div class="小标题">
                直播
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                资讯
              </div>
            </el-menu-item>
            <el-menu-item index="/CreationCenter" >
              <div class="小标题">
                富吾号
              </div>
            </el-menu-item>
            <el-menu-item index="" >
              <a href="http://www.fuwuzhishu.com/" target="_blank">
                <div class="小标题">
                  关于我们
                </div>
              </a>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="文本框">
          <el-tabs v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="推荐" name="Recommend">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="关注" name="Follow">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="宏观经济" name="MacroFinancial">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="地产" name="RealEstate">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="股票" name="Stock">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="理财" name="FinancialManagement">
              <el-row>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
                <el-col :span="6" class="video">
                  <div style="position: relative; height: 150px; width: 200px">
                    <img :src="cover" width="200" height="150" alt="" @click="goToVideo">
                    <span style="position: absolute; bottom: 0; left: 0;width: 100%;background: rgba(0,0,0,0.5);color: white">
              <i class="el-icon-video-play">100万</i>
              <i class="el-icon-check">10万</i>
              <span style="position:absolute;bottom: 0; right: 0;color: white">
                01:05
              </span>
            </span>
                  </div>
                  <div @click="goToVideo">视频标题</div>
                  <div style="color: #B0B0B0">作者</div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="金课" name="Curriculum">
                  <div class="广告栏">
                    <div style="width:100%" id="banner">
                      <!--动态将图片轮播图的容器高度设置成与图片一致-->
                      <el-carousel :height="bannerHeight + 'px'" interval="5000" arrow="always">
                        <!--遍历图片地址,动态生成轮播图-->
                        <el-carousel-item v-for="item in imglist" :key="item">
                          <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
                            <img style="width:100%;height:auto" :src="item"></a>
                        </el-carousel-item>
                      </el-carousel>
                    </div>
                  </div>
                  <el-row class="功能栏" style="margin-top: 75px;background-color: #ffab95">
                    <div @click="goToType">
                      <el-col :span="8">
                        <el-image :src="Type" class="功能栏图标"></el-image>
                      </el-col>
                      <el-col :span="9" class="功能栏字体">
                        分   类
                      </el-col>
                    </div>
                  </el-row>
                  <el-row class="功能栏" style="background-color: #c6ddff">
                    <div @click="goToRanking">
                      <el-col :span="8">
                        <el-image :src="Ranking" class="功能栏图标"></el-image>
                      </el-col>
                      <el-col :span="9" class="功能栏字体">
                        金 课 榜
                      </el-col>
                    </div>
                  </el-row>
                  <el-row class="功能栏" style="background-color: #fff4be">
                    <div @click="goToBookShelf">
                      <el-col :span="8">
                        <el-image :src="Bookshelf" class="功能栏图标"></el-image>
                      </el-col>
                      <el-col :span="9" class="功能栏字体">
                        我  的  书  架
                      </el-col>
                    </div>
                  </el-row>
                  <el-row class="功能栏" style="background-color: #aaffb0">
                    <el-col :span="8">
                      <el-image :src="Settle" class="功能栏图标"></el-image>
                    </el-col>
                    <el-col :span="9" class="功能栏字体">
                      <div>
                        <div class="mask" v-if="showModal" @click="showModal=false"></div>
                        <div class="pop" v-if="showModal">
                          <div style="margin-left: 30px;margin-top: 20px">导师入驻</div>
                          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">
                            <el-form-item label="合作类型" prop="type">
                              <el-select v-model="ruleForm.type" placeholder="请选择合作类型">
                                <el-option label="企业合作" value="enterprise"></el-option>
                                <el-option label="个人合作" value="personal"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="您的姓名" prop="name">
                              <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="tel">
                              <el-input v-model="ruleForm.tel"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                              <el-input v-model="ruleForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="您的职业" prop="occupation">
                              <el-input v-model="ruleForm.occupation"></el-input>
                            </el-form-item>
                            <el-form-item label="教育经历" prop="education">
                              <el-radio-group v-model="ruleForm.education">
                                <el-radio label="本科"></el-radio>
                                <el-radio label="硕士"></el-radio>
                                <el-radio label="博士"></el-radio>
                                <el-radio label="其他教育或培训经历"></el-radio>
                              </el-radio-group>
                            </el-form-item>
                            <el-form-item label="毕业学校" prop="school">
                              <el-input v-model="ruleForm.school"></el-input>
                            </el-form-item>
                            <el-form-item label="专业" prop="major">
                              <el-input v-model="ruleForm.major"></el-input>
                            </el-form-item>
                            <el-form-item label="是否有在线课程或知识付费经验" prop="experience">
                              <el-radio-group v-model="ruleForm.experience">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                              </el-radio-group>
                            </el-form-item>
                            <el-form-item label="讲师自我介绍" prop="introduction">
                              <el-input v-model="ruleForm.introduction"></el-input>
                            </el-form-item>
                            <el-form-item label="拟合作类型" prop="curriculumType">
                              <el-select v-model="ruleForm.curriculumType" placeholder="请选择">
                                <el-option label="大学" value="university"></el-option>
                                <el-option label="通识" value="general"></el-option>
                                <el-option label="理财" value="financialManagement"></el-option>
                                <el-option label="地产" value="realEstate"></el-option>
                                <el-option label="股票" value="stock"></el-option>
                                <el-option label="保险" value="insurance"></el-option>
                                <el-option label="基金" value="fund"></el-option>
                                <el-option label="期货" value="futures"></el-option>
                                <el-option label="艺术品" value="artwork"></el-option>
                                <el-option label="其他" value="others"></el-option>
                              </el-select>
                            </el-form-item>
                            <el-form-item label="拟合作课程名称及介绍" prop="curriculumIntroduction">
                              <el-input v-model="ruleForm.curriculumIntroduction"></el-input>
                            </el-form-item>
                            <el-form-item label="备注" prop="other">
                              <el-input v-model="ruleForm.other"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                              <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                          </el-form>
                        </div>
                        <div @click="showModal=true">导  师  入  驻</div>
                      </div>
                    </el-col>
                  </el-row>
              <div style="margin-top: 60px;margin-left: 50px;font-size: 30px">
                名师金课推荐
              </div>
              <el-row style="margin-left: 100px;margin-top: 40px;height: 250px;">
                <el-col :span="6">
                  <img :src="cover" width="350" height="250" alt="" @click="goToCurriculumVideo">
                </el-col>
                <el-col :span="12">
                  <el-row class="视频标题">
                    <div @click="goToCurriculumVideo">视频标题</div>
                  </el-row>
                  <el-row class="视频简介">
                    视频简介
                  </el-row>
                </el-col>
                <span class="底端">
                共 10 节
                <el-divider direction="vertical"></el-divider>
                10000人购买
              </span>
                <span class="价格">
                60 富吾币
              </span>
                <span class="原价">
                300 富吾币
              </span>
              </el-row>
              <el-row style="margin-left: 100px;margin-top: 40px;height: 250px;">
                <el-col :span="6">
                  <img :src="cover" width="350" height="250" alt="" @click="goToCurriculumVideo">
                </el-col>
                <el-col :span="12">
                  <el-row class="视频标题">
                    <div @click="goToCurriculumVideo">视频标题</div>
                  </el-row>
                  <el-row class="视频简介">
                    视频简介
                  </el-row>
                </el-col>
                <span class="底端">
                共 10 节
                <el-divider direction="vertical"></el-divider>
                10000人购买
              </span>
                <span class="价格">
                60 富吾币
              </span>
                <span class="原价">
                300 富吾币
              </span>
              </el-row>
              <el-divider></el-divider>
              <div style=";margin-left: 50px;font-size: 30px">
                猜你喜欢
              </div>
              <el-row style="margin-left: 100px;margin-top: 40px;height: 250px;">
                <el-col :span="6">
                  <img :src="cover" width="350" height="250" alt="" @click="goToCurriculumVideo">
                </el-col>
                <el-col :span="12">
                  <el-row class="视频标题">
                    <div @click="goToCurriculumVideo">视频标题</div>
                  </el-row>
                  <el-row class="视频简介">
                    视频简介
                  </el-row>
                </el-col>
                <span class="底端">
                共 10 节
                <el-divider direction="vertical"></el-divider>
                10000人购买
              </span>
                <span class="价格">
                60 富吾币
              </span>
                <span class="原价">
              300 富吾币
              </span>
              </el-row>
              <el-row style="margin-left: 100px;margin-top: 40px;height: 250px;">
                <el-col :span="6">
                  <img :src="cover" width="350" height="250" alt="" @click="goToCurriculumVideo">
                </el-col>
                <el-col :span="12">
                  <el-row class="视频标题">
                    <div @click="goToCurriculumVideo">视频标题</div>
                  </el-row>
                  <el-row class="视频简介">
                    视频简介
                  </el-row>
                </el-col>
                <span class="底端">
                共 10 节
                <el-divider direction="vertical"></el-divider>
                10000人购买
              </span>
                <span class="价格">
                60 富吾币
              </span>
                <span class="原价">
                300 富吾币
              </span>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="文本框">
          <el-row>
            <el-col :span="20">
              <el-input placeholder="搜索站内资讯、视频或用户" v-model="search" prefix-icon="el-icon-search"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="文本框" style="padding: 40px;">
          <el-tabs v-model="isLogin" ref="tabs">
            <el-tab-pane label="未登录" name="0">
              <div class="文本 居中">
                登录后可以保存您的浏览喜好、评论、收藏，并与APP同步，更可以发布富头条、视频与直播
              </div>
              <br/>
              <div class="居中" >
                <el-button type="primary" style="width:80%;" @click="toLogin">登录</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已登录" name="1">
              <el-row>
                <el-col :span="8"><el-avatar :size="80" :src=useravatar></el-avatar></el-col>
                <el-col :span="16">
                  <div class="文本-标题">{{nickname}} </div>
                  <div class="文本-小-宽间距">{{ userarticleandfuheadlinenumbers }} 文章 {{ uservideonumbers }} 视频</div>
                  <div class="文本-小-宽间距">{{ userthumbups }} 获赞 {{ userfollows }} 关注 {{ userfollowers }} 粉丝</div>
                  <el-button type="text" @click="logout">退出登录</el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="文本框 居中">
          扫码下载富吾app
        </div>
        <div class="文本框">
          <div class="文本-中">
            更多
          </div>
        </div>
        <div class="文本框">
          <div class="文本-中">
            友情链接
          </div>
          <el-tabs v-model="activeName2">
            <el-tab-pane>
              <span slot="label" class="文本">综合</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">财经</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">银行</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">证券</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">保险</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">基金</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">房屋</span>
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label" class="文本">收藏</span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="文本框">
          <div class="文本-中">
            法规公布
          </div>
          <br/>
          <div class="文本">
            津ICP备2021000890号-5|广播电视节目制作经营许可证（津）字第1397号|地址：天津市津南区咸水沽镇金才园48号楼底商3-220-108
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isLogin: '',
        nickname: '',
        useravatar:"",
        userarticleandfuheadlinenumbers:"",
        uservideonumbers:"",
        userthumbups:"",
        userfollows:"",
        userfollowers:"",
        queryByUserId:{
          idUser: window.sessionStorage.getItem("idUser")
        },
        imglist:[
          require('../assets/nene.jpg'),
          require('../assets/nene.jpg'),
          require('../assets/nene.jpg'),
        ],
        // 图片父容器高度
        bannerHeight :1000,
        // 浏览器宽度
        screenWidth :0,
        search :'',
        activeName1: 'second',
        activeName2: 0,
        showModal: false,
        //分类图标url
        Type:'',
        //金课榜图标url
        Ranking:'',
        //我的书架图标url
        Bookshelf:'',
        //导师入驻图标url
        Settle:'',
        //封面url
        cover:'',
        //表格填写规则
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请填写电子邮箱', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择合作类型', trigger: 'change' }
          ],
          tel: [
            { required: true, message: '请填写电话', trigger: 'blur' },
            { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          occupation: [
            { required: true, message: '请填写职业', trigger: 'blur' }
          ],
          education: [
            { required: true, message: '请填写教育经历', trigger: 'change' }
          ],
          school:[
            { required: true, message: '请填写毕业院校', trigger: 'blur' }
          ],
          major:[
            { required: true, message: '请填写专业', trigger: 'blur' }
          ],
          experience: [
            { required: true, message: '请选择一项', trigger: 'change' }
          ],
          introduction:[
            { required: true, message: '请填写介绍', trigger: 'blur' },
            { max: 1000, message: '长度小于 1000 个字符', trigger: 'blur' }
          ],
          curriculumType:[
            { required: true, message: '请选择一项', trigger: 'change' }
          ],
          curriculumIntroduction:[
            { required: true, message: '请填写课程介绍', trigger: 'blur' },
            { max: 1000, message: '长度小于 1000 个字符', trigger: 'blur' }
          ],
          other:[
            { required: false }
          ]
        }
      };
    },
    created() {
      this.init()
    },
    methods: {
      //跳转登陆界面
      toLogin(){
        this.$router.push("/Login");
      },
      logout() {
        window.sessionStorage.removeItem('idUser');
        this.init()
      },
      async init(){
        this.$nextTick(function () {
          this.$refs.tabs.$children[0].$refs.tabs[0].style.display="none";
        })
        this.$nextTick(function () {
          this.$refs.tabs.$children[0].$refs.tabs[1].style.display="none";
        })
        const token = window.sessionStorage.getItem("idUser");
        if(!token) {
          this.isLogin='0';
        }
        else {
          this.isLogin='1';
          const {data: res} = await this.$http.get('http://39.102.76.217:8082/getuserbasicinfobyid', {
            params:this.queryByUserId
          })
          this.nickname=res.nickname
          this.useravatar=res.useravatar
          this.userarticleandfuheadlinenumbers=res.userarticleandfuheadlinenumbers
          this.uservideonumbers=res.uservideonumbers
          this.userthumbups=res.userthumbups
          this.userfollows=res.userfollows
          this.userfollowers=res.userfollowers

        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //跳转
      goToVideo(){
        this.$router.push('/Video/Video');
      },
      goToRanking(){
        this.$router.push('/Video/CurriculumRanking');
      },
      goToCurriculumVideo(){
        this.$router.push('/Video/CurriculumVideo');
      },
      goToType(){
        this.$router.push('/Video/CurriculumType');
      },
      goToBookShelf(){
        this.$router.push('/Video/CurriculumBookShelf');
      },
      //检查表格是否填充完整
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功！');
            this.showModal=false;
          } else {
            console.log('提交失败！请检查是否有未填充项！');
            return false;
          }
        });
      },
      //重置表格
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      setSize:function () {
        // 通过浏览器宽度(图片宽度)计算高度
        this.bannerHeight = 400 / 1920 * this.screenWidth;
      },
    },
    mounted() {
      // 首次加载时,需要调用一次
      this.screenWidth =  window.innerWidth;
      this.setSize();
      // 窗口大小发生改变时,调用一次
      window.onresize = () =>{
        this.screenWidth =  window.innerWidth;
        this.setSize();
      }
    }
  };
</script>

<style scoped>

.广告栏{
  margin-left: 130px;
  margin-top: 75px;
  height: 360px;
  width: 640px;
  border: solid 1px #909399;
}

.功能栏{
  height: 80px;
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 10px ;
  border: solid 1px #909399;
  border-radius: 10px;
}

.功能栏字体{
  font-size: 30px;
  margin-top: 20px;
  color: #707070;
}

.功能栏图标{
  height: 60px;
  width: 60px;
  margin-top: 10px;
  margin-left: 60px;
}

.视频标题{
  font-size: 40px;
}

.视频简介{
  font-size: 30px;
  color: #707070;
}
.底端{
  position: absolute;
  bottom: 0;
  left: 450px;
  color: #707070;
}
.价格{
  position: absolute;
  bottom: 20px;
  left: 450px;
  font-size: 25px;
  color: #72adff;
}
.原价{
  position: absolute;
  bottom: 20px;
  left: 620px;
  font-size: 25px;
  color: #909399;
  text-decoration: line-through;
}

.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}

.pop {
  background-color: #fff;
  position: absolute;
  width: 800px;
  height: 1100px;
  transform: translate(-35%,-70%);
  z-index: 2
}

.form{
  margin-top: 20px;
  margin-right: 30px;
}

.背景 {
  background: #f8f7f7;
}

.页眉{
  height: 50px;
  background: #ffffff;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}
.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}
</style>